<template>
	<view class="ask-form">
		<view class="ask-form-pro">
			<image :lazy-load="true" :src="proInfo.image" mode="aspectFill"></image>
			<view class="goods-name">{{proInfo.goods_name}}</view>
		</view>
		<view class="textarea" v-if="!isAuth">
			<textarea placeholder="填写您的问题,厂家会为您解答哦~" placeholder-class="place" :adjust-position="false" v-model="content"></textarea>
		</view>
		<view :class="['ask-form-btn',{isSubmit: isSubmit}]" @click="submit">
			<u-loading mode="" style="margin-right: 20rpx;" v-if="isSubmit"></u-loading>
			{{isSubmit?'正在提交':'提交'}}
		</view>
		<view class="tips">
			<text style="color: #141414;">温馨提示：</text><text style="margin-top: 10rpx; color: #B3B3B3;">为了更好的安全服务，提问内容中禁止出现微信、手机号码、地址，违规则禁止三天提问，谢谢！</text>
		</view>
		
		<uni-popup type="center" ref="templeteMessage" :maskClick="false">
			<view class="templeteMessage-box">
				<view class="templeteMessage-box-close"><u-icon name="close" size="40" @click="closeTempleteMessage"></u-icon></view>
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/tips.png?v=2"></image>
				<view class="templeteMessage-tit">打开咨询回复提醒</view>
				<view class="templeteMessage-subtit">开启提醒，第一时间了解详情</view>
				<view class="templeteMessage-btn" @click="TemplateMessage">马上开启</view>
			</view>
		</uni-popup>
		
		<pt-openSetting 
			ref="openSetting" 
			tips="您已关闭订阅消息主开关，请打开主开关后重新提交提问" 
			@closeOpenSetting="closeOpenSetting">
		</pt-openSetting>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSubmit: false,
				goods_id: '',
				isMerchant: false,
				content: '',
				proInfo: {
					image: '',
					goods_name: '',
					goods_type: ''
				},
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				isAuth: false
			};
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			if(options.isMerchant){
				this.isMerchant = true
			}
			this.init()
		},
		methods: {
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: this.isMerchant?0:this.goods_id,
					store_goods_id: this.isMerchant?this.goods_id:0,
					is_new: 1
				})
			},
			init(){
				this.$u.api.GoodsInfo({
					goods_id: this.goods_id
				}).then(res => {
					this.proInfo.image = res.datas[0].image
					this.proInfo.goods_name = res.datas[0].goods_name
					this.proInfo.goods_type = res.datas[0].goods_type
				})
			},
			submit(){
				if(!this.content){
					uni.showToast({
						icon: 'none',
						title: '请输入您要咨询的问题'
					})
					return
				}
				if(this.isSubmit){
					uni.showToast({
						icon: 'none',
						title: '正在提交，请勿重复提交'
					})
					return
				}
				this.isSubmit = true
				// #ifdef APP-PLUS || H5
				this.$u.throttle(this.SubmitAsk, 2000)
				// #endif
				// #ifdef MP-WEIXIN
				uni.getSetting({
					withSubscriptions: true,
					success: (success) => {
						if(!success.subscriptionsSetting.mainSwitch){
							this.$refs.openSetting.init()
							this.isSubmit = false
						}else{
							if(success.subscriptionsSetting){
								if(!success.subscriptionsSetting.itemSettings || success.subscriptionsSetting.itemSettings['pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k']==="reject"){
									this.$refs.templeteMessage.open()
									this.isSubmit = false
								}else if(!success.subscriptionsSetting.itemSettings['pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k']){
									this.$refs.templeteMessage.open()
									this.isSubmit = false
								}else{
									this.$u.throttle(this.SubmitAsk, 2000)
								}
							}
						}
					},
					fail: (fail) => {
						uni.showToast({
							icon: 'none',
							title: fail.errMsg
						})
					}
				})
				// #endif
			},
			SubmitAsk(){
				this.$u.api.AddAsk({goods_id: this.goods_id,goods_type: this.proInfo.goods_type,type: '',content: this.content}).then(res => {
					this.addFoot('工厂问答-提问')
					uni.showToast({
						icon: 'none',
						title: '提交成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							animationDuration: 500,
							success: () => {
								this.isSubmit = false
							}
						})
					},1500)
				}).catch(() => {
					this.isSubmit = false
				})
			},
			closeTempleteMessage(){
				this.$refs.templeteMessage.close()
			},
			TemplateMessage(){
				uni.requestSubscribeMessage({
					tmplIds: [
						'pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k'
					],
					complete: (e) => {
						let name = e['pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k']
						switch (name){
							case 'accept':
								uni.showToast({
									icon: 'none',
									title: '提交成功',
									duration: 1500
								})
								setTimeout(() => {
									uni.navigateBack({
										animationDuration: 500
									})
								},1500)
								break;
							case 'reject':
								uni.showToast({
									icon: 'none',
									title: '您已拒绝接收通知，将不会收到消回复通知'
								})
								this.$refs.templeteMessage.close()
								setTimeout(() => {
									uni.navigateBack({
										animationDuration: 500
									})
								},1500)
								break;
						}
						this.$u.throttle(this.SubmitAsk, 2000)
					}
				})
			},
			closeOpenSetting(){
				this.$refs.templeteMessage.close()
				this.checked = false
				this.loading = false
			}
		}
	}
</script>

<style lang="scss">
	.ask-form{
		padding: 30rpx;
		.tips{
			padding: 20rpx 0;
			color: #999;
			font-size: 30rpx;
			line-height: 48rpx;
			margin-top: 20rpx;
		}
		.ask-form-pro{
			box-shadow: -2rpx 7rpx 40rpx 0px rgba(40,34,31,0.06);
			background-color: #FFF;
			border-radius: 4rpx;
			height: 98rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			image{
				width: 60rpx;
				height: 60rpx;
			}
			.goods-name{
				flex: 1;
				min-width: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 24rpx;
				color: #444;
				margin-left: 20rpx;
			}
		}
		.textarea{
			margin-top: 120rpx;
			.place{
				color: #B3B3B3;
			}
			textarea{
				width: 100%;
				font-size: 28rpx;
			}
		}
		.ask-form-btn{
			text-align: center;
			background-color: #141414;
			color: #FFF;
			border-radius: 8rpx;
			font-size: 28rpx;
			height: 90rpx;
			line-height: 90rpx;
			margin-top: 20rpx;
			&.isSubmit{
				opacity: .5;
			}
		}
		
		.templeteMessage-box{
			width: 600rpx;
			padding: 40rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			text-align: center;
			.templeteMessage-box-close{
				text-align: right;
				color: #999;
				margin-bottom: 25rpx;
			}
			.templeteMessage-tit{
				padding: 50rpx 0 30rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #141414;
			}
			.templeteMessage-subtit{
				color: #909090;
				font-size: 24rpx;
			}
			image{
				display: inline-block;
				width: 350rpx;
				height: 323rpx;
				border-radius: 10rpx;
			}
			.templeteMessage-btn{
				border-radius: 8rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: #141414;
				color: #FFF;
				font-size: 28rpx;
				margin-top: 80rpx;
			}
		}
	}
</style>
